<template>
  <CommonPanel title="异常人员记录">
    <ScrollTable :columns="columns" :tableData="emergencyEvents">
      <template #default="{ list }">
        <div class="scroll-row" v-for="item in list" :key="item.id">
          <div class="scroll-row__item">{{ item.deviceName }}</div>
          <div class="scroll-row__item">{{ item.channelName }}</div>
          <div class="scroll-row__item">{{ item.srcName }}</div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.startTime"
            placement="top"
          >
            <div class="scroll-row__item">{{ item.startTime }}</div>
          </el-tooltip>
        </div>
      </template>
    </ScrollTable>
  </CommonPanel>
</template>

<script setup>
import ScrollTable from "../components/scroll-table.vue";
import { onMounted, ref, watch } from "vue";
const props = defineProps({
  emergencyEvents: {
    type: Array,
    default: () => [
      {
        deviceName: "名称",
        channelName: "通道",
        srcName: "事件名称",
        startTime: "时间",
      },
    ],
  },
});

const columns = [
  { label: "名称", prop: "deviceName" },
  { label: "通道", prop: "channelName" },
  { label: "事件名称", prop: "srcName" },
  { label: "时间", prop: "startTime" },
];

onMounted(() => {});
</script>

<style lang="scss" scoped>
.scroll-row {
  cursor: pointer;
  font-size: 14px;
  color: #e9f7ff;
  height: 40px;
  display: flex;
  align-items: center;

  &:nth-child(2n) {
    background-color: transparent;
  }

  &:nth-child(2n + 1) {
    background-color: rgba(13, 76, 144, 0.5);
  }

  &__item {
    flex: 1;
    width: 0px;
    padding: 0px 20px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
